<template>
    <div>
        <input type="text" v-model="keyWord">
        <h3>{{ keyWord }}</h3>
    </div>
</template>

<script setup>
import { ref, customRef } from 'vue'
/**
 * 防抖
 * @param value 
 * @param delay 
 */
function myRef(value, delay) {
    return customRef((track, trigger) => {
        let timeout
        return {
            get() {
                console.log('get')
                track()
                return value
            },
            set(newValue) {
                clearTimeout(timeout)
                console.log('set')
                timeout = setTimeout(() => {
                    trigger()
                    value = newValue
                }, delay);
            }
        }
    })
}

let keyWord = myRef('hello', 1000)



</script>